<script setup>
import { computed, reactive, ref, watch, watchEffect } from 'vue';

// 1.插值语法{{}}
let name = "miranda";

let car = reactive({
  brand: "xiaomi",
  price: 1999,
  num: 1
});

// 2.指令： v-xxx
// 基础指令: v-html、v-text
// 事件指令: v-on
// 判断指令: v-if
// 循环指令: v-for
// 属性绑定: v-bind  单向绑定
// 表单绑定: v-model 双向绑定
let msg = "<p style='color: red'>你好</p>";

let fruits = ["苹果", "香蕉", "菠萝"];

// 3.属性绑定
let url = "https://www.baidu.com";

// 4.响应式ref()、reactive()
// let count = 0;
const count = ref(0);
// 响应式ref()使用步骤:
// 1.使用ref()包装基本类型、对象类型数据, 生成代理对象
// 2.任何方法、js代码中, 使用 代理对象.value 的形式读取和修改值
// 3.页面组件中, 直接使用代理对象
// 注意: 推荐使用const声明代理对象, 代表代理对象不可变, 但是内部值变化会被追踪

// 响应式reactive()使用步骤:
// 1.把对象类型使用reactive()包装, 生成代理对象
// 2.任何方法、js代码中, 使用 代理对象.属性 的形式读取和修改值
// 3.页面组件中, 直接使用 代理对象.属性

// 总结
// 1.ref要用 .value, reactive直接 .
// 2.使用const声明响应式常量
// 3.基本类型用ref(), 对象类型用reactive(), 也可以ref()一把梭
// 4.响应式数据具有深层响应式特性(属性.属性.属性 也是响应式的)

// 5.计算属性computed
const totalPrice = computed(() => car.price * car.num);

// 6.监听watch/watchEffect
// watch(count, (value, oldValue, onCleanup) => {
//   console.log("value: ", value, "oldValue: ", oldValue);
//   if(count.value > 5) {
//     alert("数量超过5...");
//     count.value = 5;
//   }
// });

// watchEffect在组件初始化时会立即执行一次, 用来收集依赖, 而watch只有在被监听的数据发生变化时才会执行, 如果设置了immediate: true, 则watch在页面首次加载时就会执行
// watch需要手动指定要监听的数据和回调函数, watchEffect则不需要显式地指定要监听的数据, 它会自动追踪函数内部使用的响应式数据
// watch可以同时获取更改前后的值, watchEffect则无法获取到更改前的值, 它只能获取到变化后的值
watchEffect(() => {
  if(count.value > 5) {
    alert("数量超过5...");
    count.value = 5;
  };

  if(car.price > 3000) {
    alert("太贵了");
    car.price = 3000;
  }
});

function buy() {
  alert("购买成功");
}

function increment() {
  // count++;
  count.value++;
}

function addPrice() {
  car.price += 100;
}
</script>

<template>
  <h2>姓名: {{name}}</h2>
  <h2>品牌: {{car.brand}}</h2>
  <h2>价格: {{car.price}}</h2>
  <h2>数量: {{car.num}}</h2>
  <button @click="addPrice">加价</button>
  <button @click="car.num++">加量</button>

  <div>{{msg}}</div>
  <div v-text="msg"></div>
  <div v-html="msg"></div>

  <button v-on:click="buy">购买 {{totalPrice}}</button>
  <!-- 语法糖写法 -->
  <button @click="buy">购买 {{totalPrice}}</button>
  <!-- 添加修饰符 -->
  <button @click.once="buy">购买 {{totalPrice}}</button>

  <span style="color: green" v-if="car.price < 1000">很便宜</span>
  <span style="color: red" v-else>太贵了</span>

  <ul>
    <li v-for="(fruit, index) in fruits">{{index}} --- {{fruit}}</li>
  </ul>

  <a v-bind:href="url">百度一下</a>
  <!-- 语法糖写法 -->
  <a :href="url">百度一下</a>

  <button @click="increment">{{count}}</button>
</template>

<style scoped>

</style>
